<template>
  <div id="app">
    <el-menu
      :default-active="activeIndex"
      class="elMeun"
      mode="horizontal"
      background-color="#545c64"
      active-text-color="#ffd04b"
      text-color="#fff"
    >
      <el-menu-item  disabled @click="gotoMain()" class="blog-logo"
        >猿博客</el-menu-item
      >
      <el-menu-item index="1" class="shouye" @click="gotoMain()"
        >首页</el-menu-item
      >

      <el-menu-item index="2" class="item" @click="gotoResource()"
        >资源分享</el-menu-item
      >

      <el-menu-item index="3" class="item" @click="gotoAbout()"
        >关于网站</el-menu-item
      >

      <el-menu-item class="soushuo"
        ><el-input
          placeholder="请输入内容"
          v-model="input"
          class="input-with-select"
        >
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="根据博客标题查询" value="titleName"></el-option>
            <el-option label="根据博客标签查询" value="titleTag"></el-option>
            <el-option label="根据作者查询" value="titleAuthor"></el-option>
          </el-select>
          <el-button
            @click="searchTitle()"
            slot="append"
            id="button-search"
            icon="el-icon-search"
          ></el-button> </el-input
      ></el-menu-item>

      <el-menu-item index="4" class="LR" v-if="!isLogin">
        <router-link :to="{ name: 'Login' }" tag="a"> &nbsp;登录 </router-link>
      </el-menu-item>
      <el-menu-item index="5" v-if="!isLogin">
        <router-link :to="{ name: 'Register' }" tag="a">
          &nbsp;注册
        </router-link>
      </el-menu-item>

      <el-menu-item disabled class="avatorMenuItem" v-if="isLogin">
        <img :src="userAvator" class="userAvator" />
      </el-menu-item>

      <el-submenu index="6" v-if="isLogin">
        <template slot="title"
          ><span class="el-dropdown-link">
            <strong>{{ username }}</strong>
          </span></template
        >
        <el-menu-item index="6-1" @click="MinePage()">我的主页</el-menu-item>
        <el-menu-item index="6-2" @click="logout = true">退出登录</el-menu-item>
      </el-submenu>
    </el-menu>

    <el-dialog :visible.sync="logout" width="30%" :modal-append-to-body="false">
      <span>确定要退出登录？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="logout = false">取 消</el-button>
        <el-button type="primary" @click="unlogin()">确 定</el-button>
      </span>
    </el-dialog>

    <router-view class="view" v-if="routerAlive"></router-view>
    <el-backtop :visibility-height="200" :bottom="100" :right="100">
    </el-backtop>
  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      activeIndex: "1",
      isLogin: false,
      logout: false,
      username: "hmxx",
      userAvator: "/static/images/header.jpg",
      routerAlive: true,
      select: "",
      input: "",
    };
  },
  provide() {
    //在父组件中创建属性
    return {
      routerRefresh: this.routerRefresh,
      getloginInfo: this.getloginInfo,
    };
  },
  methods: {
    gotoAbout() {
      this.$router.replace({
        name: "About",
      });
      this.routerRefresh();
    },
    searchTitle() {
      console.log("this.app.input:", this.input);
      this.$router.replace({
        name: "Myblog",
        query: { select: this.select, input: this.input },
      });
      this.routerRefresh();
    },
    MinePage() {
      this.$router.replace({ name: "MinePage" });
      this.routerRefresh();
    },
    gotoResource() {
      this.$router.replace({ name: "Resource" });
      this.routerRefresh();
    },
    gotoMain() {
      this.$router.replace({ name: "Myblog" });
      this.routerRefresh();
    },
    routerRefresh() {
      console.log("routerRefresh");
      this.getloginInfo();
      this.routerAlive = false;
      this.$nextTick(() => {
        this.routerAlive = true;
      });
    },
    async getloginInfo() {
      if (!!localStorage.getItem("Authorization")) {
        let ress = false;
        let header = {
          headers: {
            "MyBlog-Token": localStorage.getItem("Authorization"),
          },
        };
        await axios
          .get("http://localhost:8083/user/loginStatus", header)
          .then((res) => {
            if (res.data.errno != 0) {
              this.isLogin = false;
              window.localStorage.clear();
              console.log("loginStatus:", "false");
              ress = false;
            } else {
              this.isLogin = true;
              this.username = localStorage.getItem("username");
               console.log("localStorage.getItem('avatar')",localStorage.getItem("avatar"))
              if(localStorage.getItem("avatar") =='null'){
                this.userAvator = "/static/images/header.jpg";
              }else{
                this.userAvator = localStorage.getItem("avatar");
              }     
              console.log("loginStatus:", "true");
              ress = true;
            }
          });
        return ress;
      }else{
        return false;
      }
    },
    unlogin() {
      let header = {
        headers: {
          "MyBlog-Token": localStorage.getItem("Authorization"),
        },
      };
      axios.get("http://localhost:8083/user/unlogin", header).then((res) => {
        console.log("unlogin:", res);

        if (res.data.errno != 0) {
          this.$message({
            duration: 1000,
            message: "登出成功",
            center: true,
            type: "error",
          });
          this.routerRefresh();
          return;
        }
        // removeLocalStorage("Authorization");
        // removeLocalStorage("avatar");
        // removeLocalStorage("username");
        window.localStorage.clear();
        this.logout = false;
        this.username = "";
        this.isLogin = false;
        this.$message({
          duration: 1000,
          message: "已退出登录",
          type: "success",
          center: true,
        });
        this.routerRefresh();
      });
    },
  },
  created() {
    this.getloginInfo();
  },
};
</script>

<style>
.el-select .el-input {
  width: 90px;
}

.el-input-group__append:hover {
  background-color: #ffffff;
}

.el-input-group__append:active {
  background-color: #cfcfcf;
}

/* .input-with-select  */

.input-with-select .el-input-group__prepend {
  background-color: rgb(84 92 100);
}

.el-submenu__title {
  padding: 0;
}

.view {
  margin-top: 4%;
}

.el-menu-item.is-disabled {
  opacity: 1;
}

.el-menu--horizontal > .el-menu-item.avatorMenuItem {
  margin-left: 5%;
}

.el-menu--horizontal > .el-menu-item.shouye {
  margin-left: 7%;
}

.el-menu--horizontal > .el-menu-item.item {
  margin-left: 1%;
}

.el-menu--horizontal > .el-menu-item.soushuo {
  margin-left: 5%;
}

.el-menu--horizontal > .el-menu-item.LR {
  margin-left: 5%;
}

.elMeun {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;

  display: flex;
}

.nav-li {
  margin: auto;
}

.el-dropdown-link {
  cursor: pointer;
  color: #cfe0e0;
}
.userMain {
  font-size: 18px;
}

.userAvator {
  width: 50px;
  width: 50px;
  border-radius: 100px;
}

.usercontext {
  display: inline;
  position: fixed;
  right: 50px;
}

.nav-list-item-a {
  font-size: 20px;
}

.el-menu--horizontal > .el-menu-item.blog-logo {
  font-size: 30px;
  margin-left: 10%;
  font-weight: bold;
  font-family: KaiTi;
}
.el-menu--horizontal > .el-menu-item {
  color: white;
}

a {
  color: #333;
  text-decoration: none;
}
li {
  list-style: none;
}

.nav-list {
  display: flex;
  position: fixed;
  margin: 0;
  left: 20%;
  background-color: #81817a;
  color: #fff;
  border-radius: 2px;
  box-sizing: border-box;
}

#app {
  min-height: inherit;
  margin-bottom: -20px;
  padding-bottom: 20px;
  /* position: relative;
  top: 0; */
  background-image: url("/static/images/bg.png");
}
</style>
